<template>
  <div>
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="content-row">
      <div class="content-center">
        <div class="menu-row">
          <a
            class="menu-list"
            v-for="(item, index) in menulist"
            :key="index"
            :href="`${prefixUrl}/${item.href}`"
            :class="hrefActive == item.href ? 'active' : ''"
            target="_blank"
          >{{ item.name }}</a>
        </div>
        <div class="menu-right">
          <contactUs :currentCity="currentCity" v-if="hrefActive == 'lxwm.html'"></contactUs>
          <complaintFeedback :currentCity="currentCity" v-if="hrefActive == 'tsfk.html'"></complaintFeedback>
          <realEstateCooperation :currentCity="currentCity" v-if="hrefActive == 'lphz.html'"></realEstateCooperation>
          <serviceAgreement :currentCity="currentCity" v-if="hrefActive == 'fwxy.html'"></serviceAgreement>
          <privacyPolicy :currentCity="currentCity" v-if="hrefActive == 'yszc.html'"></privacyPolicy>
        </div>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
  </div>
</template>

<script>
import u from '@/plugins/Ccom'
import contactUs from '@/components/lxwm'
import complaintFeedback from '@/components/tsfk'
import realEstateCooperation from '@/components/lphz'
import serviceAgreement from '@/components/fwxy'
import privacyPolicy from '@/components/yszc'
export default {
  components: {
    contactUs, // 联系我们
    complaintFeedback, // 投诉反馈
    realEstateCooperation, // 楼盘合作
    serviceAgreement, // 服务协议
    privacyPolicy, // 隐私政策
  },
  head() {
    return {
      link: [{ rel: 'stylesheet', href: '/css/footer.css' }],
    }
  },
  data() {
    return {
      menulist: [
        {
          name: '联系我们',
          href: 'lxwm.html',
        },
        {
          name: '投诉反馈',
          href: 'tsfk.html',
        },
        {
          name: '楼盘合作',
          href: 'lphz.html',
        },
        {
          name: '服务协议',
          href: 'fwxy.html',
        },
        {
          name: '隐私政策',
          href: 'yszc.html',
        },
      ],
    }
  },
  validate({ params }) {
    // 判断接受id参数
    return /^[a-z]+\.html$/.test(params.href)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl
    var currentCity = ctx.currentCity
    var cityList = ctx.cityList
    var crumbListData = []
    var crumbName = ''
    var href = ctx.params.href

    // 不是指定页面跳回联系我们页面
    if (
      href !== 'lxwm.html' &&
      href !== 'tsfk.html' &&
      href !== 'lphz.html' &&
      href !== 'fwxy.html' &&
      href !== 'yszc.html'
    ) {
      return ctx.redirect('/404')
    }

    // 修改栏目名
    switch (href) {
      case 'lxwm.html':
        crumbName = '联系我们'
        break
      case 'tsfk.html':
        crumbName = '投诉反馈'
        break
      case 'lphz.html':
        crumbName = '楼盘合作'
        break
      case 'fwxy.html':
        crumbName = '服务协议'
        break
      case 'yszc.html':
        crumbName = '隐私政策'
        break
    }

    // 修改栏目信息
    crumbListData = [
      {
        title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
        href: prefixUrl,
      },
      {
        title: crumbName,
        href: '',
      },
    ]

    return {
      prefixUrl,
      currentCity,
      cityList,
      crumbListData,
      hrefActive: href ? href : 'lxwm.html',
    }
  },
}
</script>